<template>
  <div class="edit-profile">
    <div class="edit-profile__header">
      <h2>编辑资料</h2>
      <el-button type="text">返回</el-button>
    </div>
    <el-form ref="form" :model="formData" label-width="100px">
      <el-form-item label="头像">
        <div class="avatar">
          <img :src="formData.avatar || 'https://via.placeholder.com/150x150'" alt="头像">
          <el-upload
            class="avatar-upload"
            :action="uploadUrl"
            :show-file-list="false"
            :on-success="handleAvatarUploadSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <el-button>上传</el-button>
          </el-upload>
          <div class="avatar-tip">支持 jpg/png 格式，不超过 2MB</div>
        </div>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="formData.gender">
          <el-radio label="male">男</el-radio>
          <el-radio label="female">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="手机" prop="phone">
        <el-input v-model.number="formData.phone" type="tel"></el-input>
      </el-form-item>
      <el-form-item label="签名">
        <el-input v-model="formData.signature"></el-input>
      </el-form-item>
      <el-form-item label="简介">
        <el-input v-model="formData.intro" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="从业时间" prop="workingYears">
        <el-input-number v-model.number="formData.workingYears" :min="0" :max="50"></el-input-number>
      </el-form-item>
      <el-form-item label="擅长标签" prop="tags">
        <div class="tags">
          <el-tag v-for="(tag, index) in formData.tags" :key="index" closable @close="handleTagClose(index)">{{ tag }}</el-tag>
          <el-input
            v-if="formData.tags.length < 5"
            class="tag-input"
            placeholder="请输入标签"
            v-model="tagInput"
            @keyup.enter="addTag"
            @blur="addTag"
          ></el-input>
        </div>
      </el-form-item>
      <el-form-item label="每日私课上限" prop="dailyLimit">
        <el-input-number v-model.number="formData.dailyLimit" :min="0" :max="10"></el-input-number>
      </el-form-item>
      <el-form-item label="相册">
        <div class="album">
          <el-upload
            class="album-upload"
            :action="uploadUrl"
            :on-success="handleAlbumUploadSuccess"
            :before-upload="beforeAlbumUpload"
            :on-remove="handleAlbumRemove"
          >
            <el-button>上传</el-button>
          </el-upload>
          <div class="album-list">
            <div class="album-item" v-for="(url, index) in formData.albumUrls" :key="index">
              <img :src="url" alt="相册图片">
              <el-button class="album-item__delete" type="text" icon="el-icon-close" @click="handleAlbumDelete(index)"></el-button>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="所属场馆" prop="venues">
        <el-checkbox-group v-model="formData.venues">
          <el-checkbox label="venue1">场馆1</el-checkbox>
          <el-checkbox label="venue2">场馆2</el-checkbox>
          <el-checkbox label="venue3">场馆3</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="formData.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="formData.password" type="password"></el-input>
      </el-form-item>
      <el-form-item label="账户启用状态" prop="enabled">
        <el-switch v-model="formData.enabled" active-value="1" inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
        <div class="submit-tip">请完善资料后再提交</div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const formData = ref({
  avatar: '',
  name: '',
  gender: 'male',
  phone: '',
  signature: '',
  intro: '',
  workingYears: 0,
  tags: [],
  dailyLimit: 0,
  albumUrls: [],
  venues: [],
  username: '',
  password: '',
  enabled: true
})
const tagInput = ref('')
const uploadUrl = '/api/upload'

const beforeAvatarUpload = (file: File): boolean => {
  const isJPG = file.type === 'image/jpeg'
  const isPNG = file.type === 'image/png'
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isJPG && !isPNG) {
    ElMessage.error('头像只能上传 JPG/PNG 格式的图片')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('头像图片大小不能超过 2MB')
    return false
  }

  return true
}

const handleAvatarUploadSuccess = (res: any, file: File) => {
  formData.value.avatar = URL.createObjectURL(file)
  ElMessage.success('头像上传成功')
}

const beforeAlbumUpload = (file: File): boolean => {
  const isJPG = file.type === 'image/jpeg'
  const isPNG = file.type === 'image/png'
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isJPG && !isPNG) {
    ElMessage.error('相册只能上传 JPG/PNG 格式的图片')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('相册图片大小不能超过 2MB')
    return false
  }

  return true
}

const handleAlbumUploadSuccess = (res: any, file: File) => {
  formData.value.albumUrls.push(URL.createObjectURL(file))
  ElMessage.success('相册上传成功')
}

const handleAlbumRemove = (file: any, fileList: any) => {
  const index = formData.value.albumUrls.findIndex((url: string) => url === file.url)
  if (index !== -1) {
    formData.value.albumUrls.splice(index, 1)
  }
}

const handleAlbumDelete = (index: number) => {
  formData.value.albumUrls.splice(index, 1)
}

const handleTagClose = (index: number) => {
  formData.value.tags.splice(index, 1)
}

const addTag = () => {
  const tag = tagInput.value.trim()
  if (tag && formData.value.tags.length < 5 && formData.value.tags.indexOf(tag) === -1) {
    formData.value.tags.push(tag)
    tagInput.value = ''
  }
}

const handleSubmit = () => {
  console.log(formData.value)
}

</script>

<style scoped>
.edit-profile {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
.edit-profile__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.avatar {
  display: flex;
  align-items: center;
  margin-left: 100px;
}
.avatar img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
}
.avatar-upload {
  margin-left: 20px;
}
.avatar-tip {
  color: #999;
  font-size: 12px;
  margin-top: 10px;
}
.tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-left: 100px;
  margin-top: 5px;
}
.tags .el-tag {
  margin-right: 10px;
  margin-bottom: 5px;
}
.tag-input {
  width: 80px;
  margin-left: 10px;
}
.album {
  margin-left: 100px;
}
.album-upload {
  margin-bottom: 10px;
}
.album-list {
  display: flex;
  flex-wrap: wrap;
}
.album-item {
  position: relative;
  margin-right: 10px;
  margin-bottom: 10px;
}
.album-item__delete {
  position: absolute;
  top: 0;
  right: 0;
}
.submit-tip {
  color: #999;
  font-size: 12px;
  margin-top: 10px;
}
</style>